<template>
  <el-row justify="center" align="middle" class="login" style="height: 100vh">
    <el-col :xs="22" :sm="14" :md="10" :lg="8" :xl="6">
      <el-card style="padding: 32px">
        <h2 style="text-align: center">登录页面</h2>
        <el-form>
          <el-form-item label="学号">
            <el-input v-model="form.usernum"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="form.password"
              type="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" style="width: 100%" @click="login"
              >登 录</el-button
            >
          </el-form-item>
          <el-link
            type="primary"
            style="float: right"
            @click="router.push({ name: 'register' })"
            >还没有账号？请注册</el-link
          >
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";
const router = useRouter();
const form = ref({
  usernum: "",
  password: "",
});
async function login() {
  const res = await axios.post(
    "http://localhost:8000/login",
    {
      usernum: form.value.usernum,
      password: form.value.password,
    },
    { withCredentials: true }
  ); // 确保发送Cookie
  const data = res.data;
  if (data.code == 0) {
    if (data.msg != "") {
      ElMessage({
        message: data.msg,
        type: "success",
      });
    }
    router.push({ name: "home", query: { userId: data.userInfo } });
  } else {
    ElMessage({
      message: data.msg,
      type: "error",
    });
  }
}
</script>

<style scoped>
.login {
  height: 100vh;
  background: no-repeat;
  background-image: url("@/assets/1.jpg");
  background-size: 100% 100%;
}
</style>
